/* ************************************************************************** */
/* HTML STYLES */
body
{
    background: black;
    font-size: 16px;
    font-family: Palatino Linotype, Sans-serif;
    line-height: 1.3;
    text-align: justify;
    
    margin: 60px;
    background-image: url('http://localhost/PreparingForBattle/images/background/content-background.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    _background-position: left;
}

li
{
    list-style-image: url('http://localhost/PreparingForBattle/images/icons/list.png');
}

a
{
    color: #273c51;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

a:hover
{
    color: #617fa1;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

h1
{
    margin-top: 0px;
    padding-top: 0px;
    color: #273c51;
    font-weight: bold;
    font-variant: small-caps;
    width: 634px;
    _width: 673px;
    border-bottom: 1px solid #9ba4ad;
}

h2
{
    color: #273c51;
    font-weight: bold;
    font-variant: small-caps;
}

table th
{
    text-align: right;
    font-variant: small-caps;
    font-weight: bold;
    color: #273c51;
}

/* ************************************************************************** */
/* DIVIDERS */

.divider-simple
{
    width: 45px;
    height: 45px;
    background-image: url('http://localhost/PreparingForBattle/images/dividers/divider-simple.png');
}

/* ************************************************************************** */
/* CONTENT */

#content
{
    margin: auto;
    width: 950px;   
}

#content #middle
{
    width: 683px;
    height: 800px;
    float: left;
    margin-right: 20px;
}

#content #middle #middle-top
{
    background: url('http://localhost/PreparingForBattle/images/background/content-top.jpg');
    width: 683px;
    height: 29px;
    margin-bottom: 0px;
}

#content #middle #middle-text
{
    background: url('http://localhost/PreparingForBattle/images/background/content-middle.jpg');
    background-repeat: repeat-y;
    width: 634px;
    _width: 673px;
    padding-top: 10px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
}

#content #middle #middle-bottom
{
    background: url('http://localhost/PreparingForBattle/images/background/content-bottom.png');
    width: 683px;
    height: 112px;
}

/* ************************************************************************** */
/* MENU */

#content #menu
{
    float: left;
}

#content #menu #menu-top
{
    background: url('http://localhost/PreparingForBattle/images/background/news-top.jpg');
    width: 247px;
    height: 13px;
    margin-bottom: 0px;
}

#content #menu .menu-connection
{
    background: url('http://localhost/PreparingForBattle/images/background/news-connection.png');
    width: 247px;
    height: 46px;
    margin-bottom: 0px;
}

#content #menu .menu-middle
{
    background: url('http://localhost/PreparingForBattle/images/background/news-middle.jpg');
    background-repeat: repeat-y;
    width: 207px;
    _width: 247px;
    margin: 0px;
    margin-top: 0px;
    padding: 20px;
    padding-top: 10px;
}

#content #menu .menu-middle .title
{
    width: 207px;
    _width: 247px;
    border-bottom: 1px solid #9ba4ad;
    color: #273c51;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 23px;
    margin-bottom: 5px;
}

#content #menu #menu-bottom
{
    background: url('http://localhost/PreparingForBattle/images/background/news-bottom.png');
    width: 247px;
    height: 107px;
}

/* ************************************************************************** */
/* WARNINGS */

.missing-lang
{
    color: #CC0000;
}

#login-error
{
    color: #CC0000;
    text-align: center;
    font-weight: bold;
}

/* ************************************************************************** */
/* FORMS */

.form-label
{
    padding-top: 5px;
    font-size: 12pt;
    font-variant: small-caps;
    color: #273c51;
    text-align: left;
}

input 
{ 
    border: 1px groove #3a5573;
    background-color: #617fa1;
    background-image: linear-gradient(#9ba4ad, #617fa1);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height: 25px;
    padding: 3px;
    font-size: 11pt;
    font-family: Palatino Linotype, sans-serif;
}  

textarea
{
    border: 1px groove #3a5573;
    background-color: #617fa1;
    background-image: linear-gradient(#9ba4ad, #617fa1);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 3px;
    font-size: 11pt;
    font-family: Palatino Linotype, sans-serif;
}

button 
{ 
    border: 1px groove #3a5573;
    background-color: #617fa1;
    background-image: linear-gradient(#9ba4ad, #617fa1);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height: 35px;
    padding: 0px 10px;
    font-size: 12pt;
    font-family: Palatino Linotype, sans-serif;
    font-variant: small-caps;
    cursor: pointer;
}

select 
{ 
    border: 1px groove #3a5573;
    background-color: #617fa1;
    background-image: linear-gradient(#9ba4ad, #617fa1);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height: 30px;
    padding: 3px;
    font-size: 11pt;
    font-family: Palatino Linotype, sans-serif;
} 

.button-tear-image
{
    background: url('http://localhost/PreparingForBattle/images/icons/tear.png') no-repeat;
    width: 11px;
    height: 15px;
    overflow: hidden;
    display: inline;
    padding-right: 15px;
    margin-top: 5px;
    position: relative;
    top: 4px;
}

/* ************************************************************************** */
/* FAQ */

.par-title
{
    vertical-align: top;
    font-weight: bold;
}

/* ************************************************************************** */
/* POST OFFICE */

#messages
{
    margin: auto;
    margin-top: 15px;
    _margin-left: 25px;
    position: relative;
    text-align: center;
    width: 150px;
    height: 64px;
    _height: 64px;
}

#messages font
{
    color: gray; 
    font-size: 16pt; 
    font-size: 16pt; 
    top: 9px; 
    left: 69px; 
    position: absolute;
}

#messages font:hover
{
    color: white;
} 

/* ************************************************************************** */
/* AVATAR */

.avatar
{
    width: 170px;
    height: 216px;
    position: relative;
    display: block;
}

.avatar .avatar-big
{
    position: absolute;
    z-index: 0;
    width: 150px;
    height: 200px;
    top: 8px;
    left: 10px;
}

.avatar .avatar-big-frame
{
    position: absolute;
    z-index: 10;
    width: 170px;
    height: 216px;
    background: url('http://localhost/PreparingForBattle/images/background/frame.png');
    top: 0px;
    left: 0px;
}

/* ************************************************************************** */
/* HERO */

.hero-name
{
    font-size: 17pt;
    font-variant: small-caps;
    font-weight: bold;
    text-decoration: underline;
}

.hero-detail
{
    font-style: italic;
}

.table-hero-detail th
{
    text-align: left;
    font-variant: small-caps;
    font-weight: bold;
    color: #273c51;
}

.health-bar
{
    width: 250px;
    height: 25px;
    border: 1px solid black;
}

.health-bar .health-bar-title
{
    width: 250px;
    height: 23px;
    text-align: center;
}

.health-bar .health-bar-line
{
    height: 25px;
    background-image: linear-gradient(#a2000c 50%, #650910 100%);
}

.mana-bar
{
    width: 250px;
    height: 25px;
    border: 1px solid black;
}

.mana-bar .mana-bar-title
{
    width: 250px;
    height: 23px;
    text-align: center;
}

.mana-bar .mana-bar-line
{
    height: 25px;
    background-image: linear-gradient(#0B5FA5 50%, #043C6B 100%);
}

#armory
{
    padding-top: 20px;
    width: 230px;
    height: 84px;
    margin: 0px auto;
}

#armory .spot
{
    width: 60px;
    height: 60px;
    border: 5px groove #9ba4ad;
    float: left;
    background-image: linear-gradient(#9ba4ad, #617fa1);
}

#armory #armor_spot
{
    margin-right: 10px;
    background: url("http://localhost/PreparingForBattle/images/icons/armor.png") repeat;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
}

#armory #weapon_spot
{
    margin-right: 10px;
    background: url("http://localhost/PreparingForBattle/images/icons/weapon.png") repeat;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
}

#armory #ring_spot
{
    background: url("http://localhost/PreparingForBattle/images/icons/ring.png") repeat;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
}

#inventory
{
    width: 624px;
    min-height: 180px;
    background-image: linear-gradient(#9ba4ad, #617fa1);
    border: 5px groove #9ba4ad;
    margin-top: 10px; 
    text-align: left;
}

.item
{
    margin-right: 5px;
}